<script setup lang="ts">
import ApiTools from "@/api/tools";
import useForm from "@/hooks/useForm";
import { ProInputNumber } from "@/modules/package/form";
import ProSelect from "@/modules/package/form/components/ProSelect.vue";
import mpPathList from "@/utils/mpPath";
import {
  ElAlert,
  ElButton,
  ElCard,
  ElForm,
  ElFormItem,
  ElMessageBox,
} from "element-plus";

const envVersionOptions = [
  { label: "正式版", value: "release" },
  { label: "体验版", value: "trial" },
  { label: "开发版", value: "develop" },
];

const { refForm, data, model, reset, submit, onFetchResponse } = useForm(
  ApiTools.generateMiniUrlLink,
  {
    defaultModel: {
      path: "",
      env_version: "release",
      // 过期类型：0 按天数（expire_interval） 1 按时间戳（expire_time）
      expire_type: 0,
      expire_interval: 1,
    },
  }
);

onFetchResponse(() => {
  ElMessageBox.confirm(data.value?.url_link, "小程序页面地址");
});

const rules = {
  path: { required: true, message: "选择页面" },
  expire_interval: { required: true, message: "输入有效期时间" },
};
</script>

<!-- 获取小程序 H5 URL Link -->

<template>
  <ElAlert show-icon center type="warning" class="mb-5">
    <span>平台有数量限制，按需生成；</span>
    <span>自行保存链接</span>
  </ElAlert>

  <ElCard class="w-[500px] mx-auto" header="创建小程序链接">
    <ElForm
      ref="refForm"
      label-width="7em"
      :model="model"
      :rules="rules"
      size="large"
    >
      <ElFormItem label="小程序页面" prop="path">
        <ProSelect v-model="model.path" :options="mpPathList" />
      </ElFormItem>

      <ElFormItem label="版本环境">
        <ProSelect v-model="model.env_version" :options="envVersionOptions" />
      </ElFormItem>

      <ElFormItem label="有效天数" prop="expire_interval">
        <ProInputNumber
          v-model="model.expire_interval"
          :precision="0"
          :min="1"
          :max="30"
        />
        <span class="ml-1">天</span>
      </ElFormItem>
    </ElForm>

    <template #footer>
      <div class="text-center">
        <ElButton size="large" @click="reset">重置</ElButton>
        <ElButton size="large" type="primary" @click="submit">确定</ElButton>
      </div>
    </template>
  </ElCard>
</template>
